<!--
 * @Author: your name
 * @Date: 2021-08-05 17:08:26
 * @LastEditTime: 2021-08-05 19:26:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \briup\3-html&css\day04\7-属性选择器.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        /* ~ 全词匹配 */
          /* [title~=di] {
              background-color: lime;
          } */
          /* * 模糊匹配 */
          /* [title*=di] {
              background-color: mediumpurple;
          } */
          /* ^ 以di开头 */
          /* [title^=di] {
              background-color: mediumslateblue;
          } */
          /* $ 以di结尾 */
          [title$=di] {
              background-color: mintcream;
          }
    </style>
</head>
<body>
    <div>
        <div id="app">
            <div title="d" class="myDiv" id="one">d </div>
            <!-- <p>p1</p>
            <p>p2</p>
            <p>p3</p> -->
            <div title="di" class="myDiv" id="two">di</div>
            <div title="div2myDiv" class="myDiv" id="two">2</div>
            <div class="myDiv" id="three">
                  <p class="myDiv">p2-1</p>
                  <div title="div123di">123</div>
                  <!-- <p class="">p2-2</p>
                  <p class="">p2-2</p>
                  <p class="">p2-2</p> -->
                  <p>p2-3</p>
                  <div title="div3">3</div>
                  <div>4</div>
                  <div>5</div>
            </div>
        </div>
    </div>
</body>
</html>